<template>
    <div class="person">
        <h1>姓名:{{ name }},年龄:{{ age }},性别:{{ sex }}</h1>
        <button @click="changeName">修改姓名</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeSex">修改性别</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'person'
    }
</script>

<script lang="ts" setup>
    import { reactive,toRef,toRefs } from 'vue';
    
    // 数据
    let person = reactive({
        name:'张三',
        age:18,
        sex:'男'
    })

    // 通过toRefs和toRef解构对象获得对象的响应式数据
    let {name,age} = toRefs(person)
    let sex = toRef(person,'sex')

    console.log(name,age,sex)
    // 功能
    function changeName(){
        name.value += '~'
        console.log(name.value)
    }
    function changeAge(){
        age.value += 1
    }
    function changeSex(){
        sex.value = '女'
    }

</script>